<template>
  <div>
    <el-form inline :model="queryData" ref="queryData" class="query-form">
      <el-form-item label="房产名称:" prop="assessName">
        <el-input v-model="queryData.assessName" placeholder="请输入" style="width: 200px" clearable
                  @clear="formClear('assessName')"/>
      </el-form-item>
      <el-form-item label="房东姓名:" prop="masterName">
        <el-input v-model="queryData.masterName" placeholder="请输入" style="width: 200px" clearable
                  @clear="formClear('masterName')"/>
      </el-form-item>
      <el-form-item label="房东手机:" prop="masterPhone">
        <el-input v-model="queryData.masterPhone" placeholder="请输入" style="width: 200px" clearable
                  @clear="formClear('masterPhone')"/>
      </el-form-item>
      <el-form-item label="省市区域:" prop="provinces">
        <el-cascader v-model="queryData.provinces" ref="cascader" :props="props" @change="handleChange" clearable
                     @clear="formClear('provinces')"/>
      </el-form-item>
      <el-form-item label="详情地址:" prop="address">
        <el-input v-model="queryData.address" placeholder="请输入" style="width: 200px" clearable
                  @clear="formClear('address')"/>
      </el-form-item>
      <el-form-item label="房源类型:" prop="assessType">
        <el-select v-model="queryData.assessType" placeholder="请选择" clearable @clear="formClear('assessType')"
                   style="width: 200px">
          <el-option label="写字楼" :value="1"/>
          <el-option label="商铺" :value="2"/>
          <el-option label="土地" :value="3"/>
        </el-select>
      </el-form-item>

      <el-form-item label="园区名称:" prop="gardenName">
        <el-input v-model="queryData.gardenName" placeholder="请输入" style="width: 200px" clearable
                  @clear="formClear('gardenName')"/>
      </el-form-item>
      <el-form-item label="房产状态:" prop="housingState">
        <el-select v-model="queryData.housingState" placeholder="请选择" clearable @clear="formClear('housingState')"
                   style="width: 200px">
          <el-option label="待审核" value="0"/>
          <el-option label="审核通过" value="1"/>
          <el-option label="未通过" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间:" prop="createTime">
        <el-date-picker v-model="queryData.createTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
                        style="width: 200px" clearable @clear="formClear('createTime')"/>
      </el-form-item>
      <el-form-item label="房源经纪人名称:" prop="agentName">
        <el-input v-model="queryData.agentName" placeholder="请输入" style="width: 200px" clearable
                  @clear="formClear('agentName')"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查 询</el-button>
        <el-button @click="onReset">重 置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableList" border style="width: 100%;">
      <el-table-column type="index" label="序号" align="center"/>
      <el-table-column label="房产名称" align="center" width="150" :formatter="(row) => row.roomNumber ? row.roomNumber.replace(/\,/g, '-') : ''"/>
      <el-table-column prop="masterUserId" label="房东UID" align="center"/>
      <el-table-column prop="masterName" label="房东姓名" align="center" show-overflow-tooltip/>
      <el-table-column prop="masterPhone" label="房东电话" align="center" width="150"/>
      <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip/>
      <el-table-column prop="detailedAddress" label="详情地址" align="center" show-overflow-tooltip/>
      <el-table-column prop="houseArea" label="面积" align="center"/>
      <el-table-column prop="houseTypeString" label="房源类型" align="center"/>
      <el-table-column prop="agentName" label="房源经纪人名称" align="center" width="150"/>
      <el-table-column prop="agentPhone" label="房源经纪人联系方式" align="center" width="150"/>
      <el-table-column prop="gardenName" label="关联园区名称" align="center" width="130"/>
      <el-table-column prop="checkStatusString" label="房产状态" align="center"/>
      <el-table-column prop="createTime" label="添加时间" align="center" width="150"/>
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template slot-scope="{row}">
          <el-button type="text" @click="entityInfoEvent(row, 3)">查 看</el-button>
          <!--<el-button type="text" @click="$router.push(`/housingManage/housingAdd?housingId=${row.id}`)" v-if="row.checkStatus == 1">新增房源</el-button>-->
          <el-button type="text" @click="auditEvent(1, row)">通 过</el-button>
          <el-button type="text" @click="auditEvent(2, row)">驳 回</el-button>
          <!--<el-dropdown @command="auditEvent($event, row)" style="margin-left: 10px" v-if="row.checkStatus != 1">
            <el-button type="text">审 核</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">待审核</el-dropdown-item>
              <el-dropdown-item command="1">审核通过</el-dropdown-item>
              <el-dropdown-item command="2">未通过</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>-->
        </template>
      </el-table-column>
    </el-table>
    <Paging v-model="queryData" @change="getRequest"></Paging>
  </div>
</template>

<script>
  import {getProvinces} from '@/utils/common.js'
  export default {
    name: 'houseOwner',
    data() {
      return {
        stateArr: [],
        tableList: [],
        queryData: {
          provinces: null, // 省市区
          agentName: null, // 经纪人名字
          assessName: null, //房产名称
          assessType: null, // 房屋类型：1园区；2写字楼；3商铺；4厂房；5仓库；6土地
          province: null, // 省
          city: null, // 地级市
          county: null, // 区县
          address: null, // 地址
          createTime: null, // 提交时间
          gardenName: null, // 园区名字
          housingState: null, // 审核状态：0待审核；1审核通过；2未通过；-1已屏蔽
          masterName: null, // 房东名称
          masterPhone: null, // 房东手机号
          pageNum: 1,
          pageSize: 10,
          total: 0
        },
        props: getProvinces()
      }
    },
    beforeMount() {
      this.getRequest()
    },
    methods: {
      /**
       * 审核事件
       */
      async auditEvent(event, item) {
        if (event == 2) {
          return this.$prompt('请输入驳回理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType: 'textarea'
          }).then(async({ value }) => {
            await this.$ajax.post('/my/house/assess/update', {id: item.id, checkStatus: event, checkReason: value })
            this.$message.success('操作成功!')
            this.onSubmit()
          })
        }
        await this.$ajax.post('/my/house/assess/update', {id: item.id, checkStatus: event })
        this.$message.success('操作成功!')
        this.onSubmit()
      },
      handleChange(row) {
        const entity = this.$refs.cascader.getCheckedNodes()[0]
        const list = entity && entity.pathLabels && entity.pathLabels.length > 0 ? entity.pathLabels : [null, null, null]
        let arr = ['province', 'city', 'county']
        for (let i = 0; i < list.length; i++) this.queryData[arr[i]] = list[i]
      },
      /**
       * 查询条件提交事件
       */
      onSubmit() {
        this.queryData.pageNum = 1
        this.getRequest()
      },
      /**
       * 重置事件
       */
      onReset() {
        this.queryData.pageNum = 1
        this.queryData.province = null
        this.queryData.city = null
        this.queryData.county = null
        this.$refs['queryData'].resetFields()
        this.getRequest()
      },
      /**
       * 列表请求事件
       */
      async getRequest() {
        const queryData = JSON.parse(JSON.stringify(this.queryData))
        delete queryData.provinces
        const res = await this.$ajax.get('/my/house/assess/backstage/list', { params: queryData })
        this.queryData.total = res.total
        this.tableList = res.rows
      },
      /**
       * 跳转详情
       */
      entityInfoEvent(row, type = 1) {
        this.$router.push(`/housingManage/housingDetail?id=${row?.id || ''}&type=${type}`)
      },
      /**
       * form置空事件
       */
      formClear(key) {
        this.queryData[key] = null
        this.onSubmit()
      }
    }
  }
</script>

<style scoped>

</style>
